<template>
    <div class="container f">
        <img class="bg" src="../assets/images/land.jpeg" />
        <div class="form f fv">
            <div class="title f fac">
                <img class="logo" src="../assets/images/logo.png" alt="" />
                <div class="text">重庆农产品管理平台</div>
            </div>
            <div class="type">{{ type }}</div>
            <el-form
                hide-required-asterisk
                ref="ruleFormRef"
                :model="form"
                :rules="rules"
                label-position="top">
                <el-form-item label="账号" prop="email">
                    <el-input v-model="form.email" size="large" clearable placeholder="请输入账号或邮箱" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="form.password" size="large" show-password clearable placeholder="请输入密码" />
                </el-form-item>
                <el-form-item label="验证码" prop="qrcode" class="f fpj">
                    <el-input v-model="form.qrcode" maxlength="6" size="large" placeholder="请输入验证码">
                        <template #suffix>
                            <img @click="getQrImg" v-if="type == '登录'" class="suffix" :src="qrcodeImg"
							 alt="验证码图片" />
                            <el-link v-else class="suffix" type="primary" :disabled="disabled" :underline="false" @click="sendQrCode">{{ text }}</el-link>
                        </template>
                    </el-input>
                </el-form-item>
            </el-form>
            <div class="opt f fpj fac">
                <div class="remember f fac">
                    <span class="f fac" v-if="type == '登录'"><el-checkbox v-model="isRemember" :checked="isRemember" />&nbsp;&nbsp;记住密码</span>
                </div>
                <div class="register f fac" @click="showRegister">{{ type == '登录' ? '去注册' : '登录' }}</div>
            </div>
            <el-button size="large" type="primary" :loading="loading" @click="onSubmit">{{ type }}</el-button>
        </div>
    </div>
</template>

<script setup>
    import { ref, reactive, onMounted } from 'vue'
    import { useRouter } from 'vue-router'
    import http from '@/api/account'
    import utils from '@/utils/utils'

    const router = useRouter()

    let type = ref('登录')
    const ruleFormRef = ref(null)
    let loading = ref(false)
    let isRemember = ref(JSON.parse(localStorage.getItem('ncpAccount'))?.isRemember) || ref(false)
    let qrcodeImg = ref('')
    let disabled = ref(false)
    let text = ref('发送验证码')
    const form = reactive({
        email: JSON.parse(localStorage.getItem('ncpAccount'))?.email || '',
        password: JSON.parse(localStorage.getItem('ncpAccount'))?.password || '',
        qrcode: ''
    })
    const rules = {
        email: [
            { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        qrcode: [
            { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
    }
    onMounted(() => {
        getQrImg()
    })

    // 去注册||登录
    const showRegister = () => {
        form.email = '',
        form.password = '',
        form.qrcode = ''
        loading.value = false
        if (type.value == '注册') {
            type.value = '登录'
        } else {
            type.value = '注册'
        }
    }
    // 发送邮箱验证码
    const sendQrCode = () => {
        let time = 60
        text.value = `重新发送(${time})`
        disabled.value = true
        var timer = setInterval(() => {
            if (time <= 1) {
                clearInterval(timer)
                text.value = '发送验证码'
                disabled.value = false
                return
            }
            time--
            text.value = `重新发送(${time})`
        }, 1000)
        http.qrcode({ email: form.email }).then(res => {
            ElMessage({ message: res.message, type: 'success' })
        })
    }
    // 登录||注册
    const onSubmit = () => {
        ruleFormRef.value.validate((valid) => {
            if (valid) {
                loading.value = true
                if (type.value == '登录') {
                    http.login(form).then(res => {
                        // localStorage.setItem('token', res.data.token)
                        sessionStorage.setItem('token', res.data.token)
                        sessionStorage.setItem('indexPath', res.data.indexPath)
                        if (isRemember.value) {
                            localStorage.setItem('ncpAccount', JSON.stringify({ email: form.email, password: form.password, isRemember: true}))
                        }
                        router.push(res.data.indexPath)
                    }).finally(() => {
                        loading.value = false
                        getQrImg()
                    })
                } else {
                    http.register(form).then(res => {
                        ElMessage({ message: res.message, type: 'success' })
                        form.email = '',
                        form.password = '',
                        form.qrcode = ''
                    }).finally(() => {
                        loading.value = false
                    })
                }
            }
        })
    }
    // 图片验证码
    const getQrImg = () => {
        qrcodeImg.value = qrcodeImg.value = utils.apiUrl + 'account/qrcode?&t=' + new Date().getTime()
    }
</script>

<style lang="scss" scoped>
    .container {
        width: 100%;
        height: 100vh;
        .form {
            width: 6rem;
            height: 100vh;
            padding: 0 0.87rem;
            .title {
                margin-top: 1.5rem;
                .logo {
                    width: 0.78rem;
                    height: 0.78rem;
                    margin-right: 0.1rem;
                }
                .text {
                    font-size: 0.34rem;
                }
            }
            .type {
                margin-top: 1.2rem;
                margin-bottom: 0.2rem;
                color: #000;
                font-size: 0.24rem;
                font-weight: 700;
            }
            .suffix {
                width: 1rem;
                height: 100%;
                position: absolute;
                top: 0;
                right: 5px;
                cursor: auto;
            }
            .opt {
                margin-bottom: 0.08rem;
                height: 0.32rem;
                .register {
                    height: 0.32rem;
                    text-decoration: underline;
                    cursor: pointer;
                    color: $ncpColor;
                }
            }
        }
    }
</style>